<template>
  <div 
    class="ai-advice-container"
    :class="{ 'expanded': isExpanded }"
    @click.self="toggleExpand"
  >
    <div class="card">
      <div class="card-header" @click="toggleExpand">
        <h3><i class="el-icon-cpu"></i> AI采购分析</h3>
        <i class="el-icon-more" @click.stop="showContextMenu"></i>
      </div>
      <div class="card-body">
        <!-- 初始化动画容器 -->
        <div v-if="status === 'init'" class="init-animation">
          <div class="ai-robot">
            <div class="robot-head">
              <div class="robot-eye left-eye"></div>
              <div class="robot-eye right-eye"></div>
              <div class="robot-mouth"></div>
            </div>
            <div class="robot-body">
              <div class="pulse-dots">
                <div v-for="i in 3" :key="i" class="pulse-dot" :style="{
                  animationDelay: `${i * 0.2}s`
                }"></div>
              </div>
            </div>
          </div>
          <p class="init-text">AI助手启动中<span class="ellipsis">{{ ellipsis }}</span></p>
        </div>

        <!-- 加载状态容器 -->
        <div v-else-if="status === 'loading'" class="loading-container">
          <div class="loading-header">
            <h4>正在分析采购数据</h4>
            <p class="loading-subtitle">{{ loadingText }}</p>
          </div>
          
          <div class="data-visualization">
            <div class="data-wave">
              <div v-for="(bar, index) in waveBars" :key="index" 
                class="wave-bar" 
                :style="{
                  height: `${bar.height}%`,
                  animationDuration: `${bar.speed}s`,
                  animationDelay: `${bar.delay}s`
                }"
              ></div>
            </div>
            <div class="data-points">
              <div v-for="(point, index) in dataPoints" :key="index" 
                class="data-point" 
                :style="{
                  left: `${point.x}%`,
                  top: `${point.y}%`,
                  animationDuration: `${point.speed}s`,
                  animationDelay: `${point.delay}s`
                }"
              ></div>
            </div>
          </div>
          
          <div class="progress-container">
            <div class="progress-bar" :style="{ width: progress + '%' }">
              <div class="progress-highlight"></div>
            </div>
            <div class="progress-text">{{ progress }}%</div>
          </div>
          
          <div class="loading-steps">
            <div class="step" :class="{ active: progress >= 20 }">
              <div class="step-icon">
                <i v-if="progress >= 20" class="el-icon-check"></i>
                <span v-else>1</span>
              </div>
              <div class="step-text">获取数据</div>
              <div class="step-connector" :class="{ active: progress >= 20 }"></div>
            </div>
            <div class="step" :class="{ active: progress >= 40 }">
              <div class="step-icon">
                <i v-if="progress >= 40" class="el-icon-check"></i>
                <span v-else>2</span>
              </div>
              <div class="step-text">预处理</div>
              <div class="step-connector" :class="{ active: progress >= 40 }"></div>
            </div>
            <div class="step" :class="{ active: progress >= 60 }">
              <div class="step-icon">
                <i v-if="progress >= 60" class="el-icon-check"></i>
                <span v-else>3</span>
              </div>
              <div class="step-text">AI分析</div>
              <div class="step-connector" :class="{ active: progress >= 60 }"></div>
            </div>
            <div class="step" :class="{ active: progress >= 80 }">
              <div class="step-icon">
                <i v-if="progress >= 80" class="el-icon-check"></i>
                <span v-else>4</span>
              </div>
              <div class="step-text">生成报告</div>
              <div class="step-connector" :class="{ active: progress >= 80 }"></div>
            </div>
            <div class="step" :class="{ active: progress >= 100 }">
              <div class="step-icon">
                <i v-if="progress >= 100" class="el-icon-check"></i>
                <span v-else>5</span>
              </div>
              <div class="step-text">完成</div>
            </div>
          </div>
          
          <div class="estimated-time">
            <i class="el-icon-time"></i> 
            <span class="time-text">预计剩余时间: {{ remainingTimeText }}</span>
            <span class="ai-thinking" v-if="progress > 30 && progress < 90">
              <span class="thinking-dot" v-for="( index) in 3" :key="index" 
                :style="{ animationDelay: `${index * 0.2}s` }"
              ></span>
              AI思考中...
            </span>
          </div>
        </div>

        <!-- 结果展示容器 -->
        <div v-else-if="status === 'completed'" class="result-container">
          <div class="result-header">
            <h4>AI分析结果</h4>
           <div class="result-actions">
  <el-tooltip content="重新分析" placement="top">
    <el-button 
      size="small" 
      type="primary" 
      icon="Refresh" 
      @click.stop="restartAnalysis"
      circle
    />
  </el-tooltip>
  
  <el-tooltip content="复制结果" placement="top">
    <el-button 
      size="small" 
      icon="DocumentCopy" 
      @click.stop="copyResult"
      circle
    />
  </el-tooltip>
  
  <el-tooltip content="下载报告" placement="top">
    <el-button 
      size="small" 
      icon="Download" 
      @click.stop="downloadResult"
      circle
    />
  </el-tooltip>
</div>
          </div>
          
          <div class="result-content">
            <div 
              class="typing-content" 
              v-html="displayContent"
            ></div>
            <div class="result-footer" v-if="typingComplete">
              <div class="signature">
                <div class="signature-line"></div>
                <div class="signature-text">AI采购分析助手 · {{ currentTime }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 错误状态容器 -->
        <div v-else-if="status === 'error'" class="error-container">
          <div class="error-animation">
            <div class="error-bolt">
              <div class="bolt-main"></div>
              <div class="bolt-spark" v-for="i in 3" :key="i"></div>
            </div>
          </div>
          <div class="error-message">
            <h4>分析失败</h4>
            <p>{{ errorMessage }}</p>
            <el-button 
              type="primary" 
              @click.stop="restartAnalysis"
            >
              <i class="el-icon-refresh-right"></i> 重试
            </el-button>
          </div>
        </div>

        <!-- 触发分析按钮 -->
        <div v-if="status === 'ready'" class="action-button">
          <div class="ready-animation">
            <div class="ripple-circle" v-for="i in 3" :key="i" 
              :style="{ animationDelay: `${i * 0.5}s` }"
            ></div>
          </div>
          <el-button 
            type="primary" 
            size="large" 
            @click.stop="startAnalysis"
            :loading="(status as any) === 'loading'"
            class="glow-button"
          >
            <el-icon><Search /></el-icon>
            获取采购分析建议
          </el-button>
          <p class="ready-hint">点击开始AI智能分析您的采购数据</p>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div v-if="contextMenuVisible" class="context-menu" 
      :style="{ top: contextMenuPos.y + 'px', left: contextMenuPos.x + 'px' }"
      @click.stop
    >
      <div class="menu-item" @click="copyResult">
        <i class="el-icon-document-copy"></i> 复制结果
      </div>
      <div class="menu-item" @click="downloadResult">
        <i class="el-icon-download"></i> 导出报告
      </div>
      <div class="menu-item" @click="restartAnalysis">
        <i class="el-icon-refresh"></i> 重新分析
      </div>
      <div class="menu-divider"></div>
      <div class="menu-item" @click="toggleExpand">
        <i class="el-icon-full-screen" v-if="!isExpanded"></i>
        <i class="el-icon-close" v-else></i>
        {{ isExpanded ? '退出全屏' : '全屏模式' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted,onUnmounted, computed} from 'vue';
import { ElMessage, ElButton, ElIcon } from 'element-plus';
import { Search} from '@element-plus/icons-vue';
import { ElTooltip } from 'element-plus'; 
import request from '@/utils/request';
import MarkdownIt from 'markdown-it';

// 初始化markdown解析器
const md = new MarkdownIt({
  html: true,
  breaks: true,
  linkify: true
});

// 状态类型定义
type Status = 'init' | 'ready' | 'loading' | 'completed' | 'error';

// 响应数据类型
interface AIResponse {
  status: number;
  message: string;
}

// 状态管理
const status = ref<Status>('init');
const progress = ref(0);
const loadingText = ref('正在准备数据...');
const estimatedTime = ref(180); // 初始预计3分钟
const rawContent = ref('');
const displayContent = ref('');
const errorMessage = ref('');
const typingPosition = ref(0);
const typingInterval = ref<number>(0);
const isExpanded = ref(false);
const ellipsis = ref('');
const waveBars = ref<any[]>([]);
const dataPoints = ref<any[]>([]);
const typingComplete = ref(false);
const currentTime = ref('');
const contextMenuVisible = ref(false);
const contextMenuPos = ref({ x: 0, y: 0 });

// 加载状态文本池
const loadingTexts = [
  '正在整理采购记录...',
  '正在与AI模型建立连接...',
  '正在分析高频采购物资...',
  '正在计算采购量统计数据...',
  'AI正在生成优化建议...',
  '正在验证分析结果准确性...',
  '正在优化采购策略...',
  '正在评估供应商表现...',
  '正在识别异常采购模式...'
];

// 计算剩余时间文本
const remainingTimeText = computed(() => {
  const minutes = Math.floor(estimatedTime.value / 60);
  const seconds = estimatedTime.value % 60;
  return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
});

// 初始化动画
const initAnimation = () => {
  // 初始化波浪条
  initWaveBars();
  // 初始化数据点
  initDataPoints();
  
  // 省略号动画
  const ellipsisInterval = setInterval(() => {
    ellipsis.value = '.'.repeat((ellipsis.value.length + 1) % 4);
  }, 500);
  
  // 模拟初始化过程
  setTimeout(() => {
    clearInterval(ellipsisInterval);
    status.value = 'ready';
  }, 2500);
};

// 初始化波浪条
const initWaveBars = () => {
  const bars = [];
  for (let i = 0; i < 12; i++) {
    bars.push({
      height: Math.random() * 30 + 10,
      speed: Math.random() * 0.5 + 0.8,
      delay: Math.random() * 0.5
    });
  }
  waveBars.value = bars;
};

// 初始化数据点
const initDataPoints = () => {
  const points = [];
  for (let i = 0; i < 8; i++) {
    points.push({
      x: Math.random() * 90 + 5,
      y: Math.random() * 90 + 5,
      speed: Math.random() * 3 + 2,
      delay: Math.random() * 2
    });
  }
  dataPoints.value = points;
};

// 更新加载进度
const updateProgress = () => {
  let lastProgress = 0;
  const interval = setInterval(() => {
    if (status.value !== 'loading') {
      clearInterval(interval);
      return;
    }

    // 更真实的进度增长曲线 - 开始快，中间慢，最后快
    let increment;
    if (progress.value < 20) {
      increment = Math.random() * 4 + 1; // 初始阶段较快
    } else if (progress.value < 80) {
      increment = Math.random() * 1.8 + 0.5; // 中间阶段较慢
    } else {
      increment = Math.random() * 3 + 1; // 最后阶段较快
    }
    
    // 模拟偶尔的卡顿
    if (Math.random() > 0.95 && progress.value > 20 && progress.value < 90) {
      setTimeout(() => {
        if (status.value === 'loading') {
          loadingText.value = '优化分析结果中...';
          progress.value = Math.min(progress.value + 0.5, 100);
        }
      }, 2000);
      return;
    }
    
    progress.value = Math.min(lastProgress + increment, 100);
    lastProgress = progress.value;
    
    // 更新预计时间 - 根据进度动态调整
    if (progress.value < 30) {
      estimatedTime.value = Math.max(10, estimatedTime.value - (Math.random() * 2));
    } else if (progress.value < 70) {
      estimatedTime.value = Math.max(5, estimatedTime.value - (Math.random() * 1.5));
    } else {
      estimatedTime.value = Math.max(0, estimatedTime.value - (Math.random() * 3));
    }
    
    // 随机更新加载文本
    if (Math.random() > 0.85) {
      const randomIndex = Math.floor(Math.random() * loadingTexts.length);
      loadingText.value = loadingTexts[randomIndex];
    }
    
    // 进度文本更新
    if (progress.value >= 20 && progress.value < 40) {
      loadingText.value = '正在预处理数据...';
    } else if (progress.value >= 40 && progress.value < 60) {
      loadingText.value = '正在进行AI分析...';
    } else if (progress.value >= 60 && progress.value < 80) {
      loadingText.value = '正在生成分析结果...';
    } else if (progress.value >= 80 && progress.value < 100) {
      loadingText.value = '即将完成分析...';
    }
    
    // 动态更新波浪条高度
    waveBars.value = waveBars.value.map(bar => ({
      ...bar,
      height: Math.random() * 30 + 10,
      speed: Math.random() * 0.5 + 0.8
    }));
    
    // 动态更新数据点位置
    if (Math.random() > 0.7) {
      dataPoints.value = dataPoints.value.map(point => ({
        ...point,
        x: Math.random() * 90 + 5,
        y: Math.random() * 90 + 5
      }));
    }
  }, 2000); // 稍微加快进度更新频率
};

// 打字机效果 - 改进版
const startTyping = (content: string) => {
  typingComplete.value = false;
  // 先将markdown转换为html
  const htmlContent = md.render(content);
  rawContent.value = htmlContent;
  displayContent.value = '';
  typingPosition.value = 0;
  
  // 清除可能存在的旧定时器
  if (typingInterval.value) {
    clearInterval(typingInterval.value);
  }
  
  // 定义打字速度曲线 - 开始快，中间慢，最后快
  const getTypingSpeed = (pos: number, total: number) => {
    const progress = pos / total;
    if (progress < 0.2) return 20 + Math.random() * 20; // 开始阶段快
    if (progress < 0.8) return 40 + Math.random() * 60; // 中间阶段慢
    return 20 + Math.random() * 30; // 最后阶段快
  };
  
  const typeNextChunk = () => {
    if (typingPosition.value >= rawContent.value.length) {
      clearInterval(typingInterval.value);
      typingComplete.value = true;
      updateCurrentTime();
      return;
    }
    
    // 查找下一个合适的断点
    const chunkSize = Math.floor(Math.random() * 5) + 1;
    let nextPos = typingPosition.value + chunkSize;
    
    // 尽量不在HTML标签中间断开
    if (rawContent.value.substring(typingPosition.value, nextPos).includes('<')) {
      const tagEnd = rawContent.value.indexOf('>', typingPosition.value);
      if (tagEnd !== -1 && tagEnd > typingPosition.value) {
        nextPos = tagEnd + 1;
      }
    }
    
    // 确保不超过总长度
    nextPos = Math.min(nextPos, rawContent.value.length);
    
    typingPosition.value = nextPos;
    displayContent.value = rawContent.value.substring(0, typingPosition.value);
    
    // 动态调整打字速度
    const speed = getTypingSpeed(typingPosition.value, rawContent.value.length);
    typingInterval.value = window.setTimeout(typeNextChunk, speed);
  };
  
  // 开始打字效果
  typingInterval.value = window.setTimeout(typeNextChunk, 30);
};

// 更新当前时间
const updateCurrentTime = () => {
  const now = new Date();
  currentTime.value = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
};

// 复制结果
const copyResult = () => {
  try {
    // 创建一个临时textarea元素
    const textarea = document.createElement('textarea');
    // 获取纯文本内容（去除HTML标签）
    const plainText = rawContent.value.replace(/<[^>]*>/g, '');
    textarea.value = plainText;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    
    ElMessage.success('分析结果已复制到剪贴板');
  } catch (err) {
    ElMessage.error('复制失败，请手动选择内容复制');
    console.error('复制失败:', err);
  }
  contextMenuVisible.value = false;
};

// 下载结果
const downloadResult = () => {
  try {
    const plainText = rawContent.value.replace(/<[^>]*>/g, '');
    const blob = new Blob([plainText], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `采购分析报告_${currentTime.value.replace(/[: ]/g, '-')}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    ElMessage.success('分析报告已下载');
  } catch (err) {
    ElMessage.error('下载失败');
    console.error('下载失败:', err);
  }
  contextMenuVisible.value = false;
};

// 发起分析请求
const fetchAnalysis = async () => {
  try {
    // 模拟请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 这里应该是实际的API请求
    const response = await request<AIResponse>({
      method: 'GET',
      url: '/procedure/deviceDetailAIAdvice'
    });
    
    if (response.status === 0) {
      status.value = 'completed';
      // 开始打字机效果展示结果
      startTyping((response as any).message);
    } else {
      throw new Error((response as any).message || '分析失败，未知错误');
    }
  } catch (error: any) {
    status.value = 'error';
    errorMessage.value = error.message || '获取分析结果失败，请重试';
    console.error('分析请求失败:', error);
  }
};

// 开始分析流程
const startAnalysis = () => {
  status.value = 'loading';
  progress.value = 0;
  estimatedTime.value = 180; // 重置预计时间
  
  // 启动进度更新
  updateProgress();
  
  // 发起请求
  fetchAnalysis();
};

// 重新开始分析
const restartAnalysis = () => {
  if (typingInterval.value) {
    clearInterval(typingInterval.value);
  }
  status.value = 'loading';
  progress.value = 0;
  estimatedTime.value = 180;
  updateProgress();
  fetchAnalysis();
  contextMenuVisible.value = false;
};

// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
  contextMenuVisible.value = false;
};

// 显示右键菜单
const showContextMenu = (e: MouseEvent) => {
  contextMenuPos.value = {
    x: e.clientX,
    y: e.clientY
  };
  contextMenuVisible.value = true;
};

// 点击其他地方关闭菜单
const closeContextMenu = () => {
  contextMenuVisible.value = false;
};

// 组件挂载时初始化
onMounted(() => {
  initAnimation();
  document.addEventListener('click', closeContextMenu);
});

// 组件卸载时清理
onUnmounted(() => {
  document.removeEventListener('click', closeContextMenu);
  if (typingInterval.value) {
    clearInterval(typingInterval.value);
  }
});
</script>

<style scoped lang="scss">
.ai-advice-container {
  width: 100%;
  height: 400px; /* 固定高度 */
  transition: all 0.3s ease;
  position: relative;
}

.ai-advice-container.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  z-index: 2000;
  background-color: white;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}

.card-header:hover {
  background: linear-gradient(135deg, #f0f2f5 0%, #e6e8eb 100%);
}

.card-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.card-header h3 i {
  margin-right: 8px;
  color: #409eff;
}

.card-header .el-icon-more {
  color: #999;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.card-header .el-icon-more:hover {
  color: #666;
  background-color: #e6e8eb;
}

.card-body {
  flex: 1;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background-color: #fafbfc;
}

/* 初始化动画 */
.init-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 24px;
}

.ai-robot {
  position: relative;
  width: 120px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.robot-head {
  width: 80px;
  height: 80px;
  background-color: #409eff;
  border-radius: 50% 50% 40% 40%;
  position: relative;
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
  animation: float 3s ease-in-out infinite;
}

.robot-eye {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  top: 30px;
  animation: blink 4s infinite;
}

.robot-eye.left-eye {
  left: 18px;
}

.robot-eye.right-eye {
  right: 18px;
}

.robot-mouth {
  position: absolute;
  width: 30px;
  height: 8px;
  background-color: white;
  border-radius: 4px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: talk 1s infinite alternate;
}

.robot-body {
  width: 70px;
  height: 70px;
  background-color: #409eff;
  border-radius: 20px;
  margin-top: -10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
}

.pulse-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-out;
}

.init-text {
  color: #606266;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-top: 16px;
}

.ellipsis {
  display: inline-block;
  width: 30px;
  text-align: left;
}

/* 加载状态 */
.loading-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.loading-header {
  text-align: center;
}

.loading-header h4 {
  margin: 0;
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

.loading-subtitle {
  color: #606266;
  margin-top: 8px;
  font-size: 13px;
}

.data-visualization {
  height: 100px;
  background-color: #f5f7fa;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid #e6e8eb;
}

.data-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 10px;
}

.wave-bar {
  width: 6px;
  background: linear-gradient(to top, #409eff, #a0cfff);
  border-radius: 3px 3px 0 0;
  animation: wave 1.5s infinite ease-in-out;
}

.data-points {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
}

.data-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #409eff;
  border-radius: 50%;
  opacity: 0.7;
  animation: float-point 3s infinite ease-in-out;
}

.progress-container {
  width: 100%;
  height: 10px;
  background-color: #f0f2f5;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin: 8px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #a0cfff, #409eff);
  border-radius: 5px;
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.progress-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0) 100%);
  animation: progress-shine 2s infinite;
}

.progress-text {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #606266;
  font-weight: 500;
}

.loading-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  position: relative;
}

.step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e6e6e6;
  color: #8c8c8c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.step-connector {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #e6e6e6;
  z-index: 0;
}

.step-connector.active {
  background-color: #409eff;
}

.step-text {
  font-size: 11px;
  color: #8c8c8c;
  text-align: center;
  transition: all 0.3s ease;
}

.step.active .step-icon {
  background-color: #409eff;
  color: white;
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
}

.step.active .step-text {
  color: #409eff;
  font-weight: 500;
}

.estimated-time {
  text-align: center;
  color: #606266;
  font-size: 12px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.time-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #409eff;
  font-size: 11px;
}

.thinking-dot {
  width: 4px;
  height: 4px;
  background-color: #409eff;
  border-radius: 50%;
  animation: blink 1.4s infinite;
}

/* 结果展示区域 */
.result-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.result-header h4 {
  margin: 0;
  font-size: 15px;
  color: #333;
  font-weight: 600;
}

.result-actions {
  display: flex;
  gap: 6px;
}

.result-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 6px;
  line-height: 1.6;
  font-size: 13px;
  border: 1px solid #e6e8eb;
}

.typing-content {
  min-height: 100%;
}

.result-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.signature-line {
  width: 100px;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 4px;
}

.signature-text {
  font-size: 11px;
  color: #999;
  font-style: italic;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
  height: 100%;
}

.error-animation {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-bolt {
  position: relative;
  width: 40px;
  height: 60px;
}

.bolt-main {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f56c6c;
  clip-path: polygon(50% 0%, 10% 50%, 40% 50%, 0% 100%, 60% 50%, 90% 50%, 50% 0%);
  animation: shake 0.5s infinite alternate;
}

.bolt-spark {
  position: absolute;
  width: 4px;
  height: 15px;
  background-color: #ffeb3b;
  border-radius: 2px;
  animation: spark 0.8s infinite;
}

.bolt-spark:nth-child(1) {
  top: -10px;
  left: 10px;
  transform: rotate(30deg);
  animation-delay: 0.1s;
}

.bolt-spark:nth-child(2) {
  top: 30px;
  right: -5px;
  transform: rotate(-20deg);
  animation-delay: 0.3s;
}

.bolt-spark:nth-child(3) {
  bottom: -10px;
  left: 20px;
  transform: rotate(45deg);
  animation-delay: 0.2s;
}

.error-message {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-message h4 {
  color: #f56c6c;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.error-message p {
  font-size: 13px;
  color: #606266;
  margin: 0;
}

/* 触发按钮区域 */
.action-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 24px;
  position: relative;
}

.ready-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.ripple-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid rgba(64, 158, 255, 0.2);
  border-radius: 50%;
  animation: ripple 2s infinite;
}

.glow-button {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.4);
  transition: all 0.3s;
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.6);
  transform: translateY(-2px);
}

.ready-hint {
  color: #606266;
  font-size: 13px;
  margin: 0;
  text-align: center;
  animation: fadeInUp 1s ease-out;
}

/* 右键菜单 */
.context-menu {
  position: fixed;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 3000;
  min-width: 150px;
  overflow: hidden;
}

.menu-item {
  padding: 8px 12px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.menu-item i {
  font-size: 14px;
}

.menu-divider {
  height: 1px;
  background-color: #e6e8eb;
  margin: 4px 0;
}

/* 动画定义 */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes blink {
  0%, 45%, 55%, 100% {
    height: 16px;
  }
  50% {
    height: 2px;
  }
}

@keyframes talk {
  0% {
    height: 8px;
    width: 30px;
  }
  100% {
    height: 4px;
    width: 35px;
  }
}

@keyframes wave {
  0%, 100% {
    height: 30%;
  }
  50% {
    height: 70%;
  }
}

@keyframes float-point {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes progress-shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes spark {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* 适配markdown样式 */
.typing-content h1,
.typing-content h2,
.typing-content h3 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  color: #1f2937;
}

.typing-content h1 {
  font-size: 1.4em;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.3em;
}

.typing-content h2 {
  font-size: 1.2em;
}

.typing-content h3 {
  font-size: 1.1em;
}

.typing-content p {
  margin-bottom: 0.8em;
  font-size: 13px;
}

.typing-content ul,
.typing-content ol {
  margin-bottom: 0.8em;
  padding-left: 1.2em;
}

.typing-content li {
  margin-bottom: 0.4em;
  font-size: 13px;
}

.typing-content strong {
  color: #111827;
  font-weight: 600;
}

.typing-content em {
  color: #4b5563;
}

.typing-content hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

.typing-content code {
  background-color: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.85em;
}

.typing-content pre {
  background-color: #f5f7fa;
  padding: 0.8em;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 1em;
}

.typing-content pre code {
  background-color: transparent;
  padding: 0;
}

.typing-content blockquote {
  border-left: 3px solid #e5e7eb;
  padding-left: 1em;
  margin: 1em 0;
  color: #4b5563;
}

/* 滚动条样式 */
.result-content::-webkit-scrollbar {
  width: 6px;
}

.result-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.result-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.result-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>